<template>
  <div class="app-container">
    <!--    <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column align="center" label="ID" width="95">
            <template slot-scope="scope">
              {{ scope.$index }}
            </template>
          </el-table-column>
          <el-table-column label="Title">
            <template slot-scope="scope">
              {{ scope.row.title }}
            </template>
          </el-table-column>
          <el-table-column label="Author" width="110" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.author }}</span>
            </template>
          </el-table-column>
          <el-table-column label="Pageviews" width="110" align="center">
            <template slot-scope="scope">
              {{ scope.row.pageviews }}
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="Status" width="110" align="center">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="created_at" label="Display_time" width="200">
            <template slot-scope="scope">
              <i class="el-icon-time" />
              <span>{{ scope.row.display_time }}</span>
            </template>
          </el-table-column>
        </el-table>-->
    <!--商品数量-->
    <el-card style="margin: 0">
      <el-row style="font-weight: bold;">您的商品库已有
        <span style="color: #07c160">
          ？？？
        </span>件商品
      </el-row>
    </el-card>
    <!--中间部分-->
    <el-card style="height: 90%">
      <el-row style="margin: 10px 0px;">
        <el-cow>
          <span style="margin-right: 10px">商品分类:</span>
          <el-button type="text" style="color: #07c160">全部</el-button>
          <el-button type="text" style="color: #07c160">未分类</el-button>
          <span style="margin-left: 120px;margin-right: 10px">搜&nbsp;索:</span>
          <el-input placeholder="请输入商品名称" style="width: 220px"/>
          <el-button type="success" style="margin-left: 10px;background-color:#07c160;color: white">查询</el-button>
          <el-button>重置</el-button>
        </el-cow>
        <el-divider/>
      </el-row>
      <!--列表-->
      <el-row :gutter="12">
        <el-col :span="24">
          <div class="line"/>
          <el-table
            ref="aaa"
            style="margin-top: 10px"
            :data="list"
            @selection-change="tableSelected"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column align="center" label="编号" width="95">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column label="商品编号">
              <template slot-scope="scope">
                {{ scope.row.id }}
              </template>
            </el-table-column>
            <el-table-column label="商品信息">
              <template slot-scope="scope">
                {{ scope.row.info }}
              </template>
            </el-table-column>
            <el-table-column label="描述">
              <template slot-scope="scope">
                {{ scope.row.description }}
              </template>
            </el-table-column>
            <el-table-column label="规格" width="110" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.guige }}</span>
              </template>
            </el-table-column>
            <el-table-column label="分类" width="110" align="center">
              <template slot-scope="scope">
                {{ scope.row.category }}
              </template>
            </el-table-column>
            <el-table-column class="status-col" label="库存" width="110" align="center">
              <template slot-scope="scope">
                {{ scope.row.inventory }}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="110" align="center">
              <template>
                <el-button type="text" style="color: #07c160;margin:10px">查看</el-button>
                <el-button type="text" style="color: #07c160;margin:10px">修改</el-button>
                <el-button type="text" style="color: #07c160;margin:10px">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block" style="margin-bottom:75px;padding-top: 15px;float: right">
            <el-pagination

              :page-sizes="[5, 10, 15, 20]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="40"
            />
          </div>
        </el-col>
      </el-row>

    </el-card>
    <!--底部操作栏-->
    <el-card style="width: 100%;height:10%;position:fixed;bottom:0;z-index: 99;">
      <el-row>
        <el-col :span="19">
          <el-button @click="allChoose()">全选</el-button>
          <el-button @click="noChoose()">取消全选</el-button>
          <el-button @click="openDialog()">批量分类</el-button>
          <el-button>批量删除</el-button>
        </el-col>
        <el-col :span="5">
          <span>已选</span>
          <span>？？？</span>
          <span style="margin-right: 10px">件</span>
          <el-button type="success" style="background-color:#07c160;color: white">去开团</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!--弹出 批量分类 的窗口-->
    <el-dialog title="批量分类" :visible.sync="dialogFormVisible" style="width: 100%">
      分类巴拉巴拉
    </el-dialog>
  </div>
</template>
<style>
el-card {
  margin-left: 0;
  padding: 0;
}

.app-container {
  padding: 0 !important;
}

.bu {
  padding-left: 0px !important;
}

.el-button:focus, .el-button:hover {
  color: #07c160;
  border-color: #defde9;
  background-color: #defde9;
}
</style>
<script>

export default {
  // filters: {
  //   statusFilter(status) {
  //     const statusMap = {
  //       published: 'success',
  //       draft: 'gray',
  //       deleted: 'danger'
  //     }
  //     return statusMap[status]
  //   }
  // },
  data() {
    return {
      list: [
        { id: 100111, info: 'balabalabbbbb', description: 'aaaaaaaaaaaaaa', guige: '本', category: '纸书', inventory: 100 },
        { id: 100222, info: 'hshshshhshshhs', description: 'ooooooooooooo', guige: '袋', category: '零食', inventory: 100 }
      ],
      listLoading: true,
      dialogFormVisible: false
    }
  },
  created() {
  },
  methods: {
    // 列表全选
    allChoose() {
      // 列表全选
      for (const i in this.list) {
        this.$nextTick(() => {
          this.$refs.aaa.toggleRowSelection(this.list[i], true)
        })
      }
    },
    // 取消全选
    noChoose() {
      for (const i in this.list) {
        this.$nextTick(() => {
          this.$refs.aaa.clearSelection()
        })
      }
    },
    // 批量分类
    openDialog() {
      const h = this.$createElement
      this.$msgbox({
        title: '提示',
        message: h('p', null, [
          h('span', null, '您选中的商品编号为 '),
          h('i', { style: 'color: teal' }, this.listSelectId)
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
    },
    // 所有选中的行的id
    tableSelected(selection, row) {
      this.listSelectId = selection.map(item => item.id)
      console.log(this.listSelectId)
    }
  }
}
</script>
